<template>
<div class="index-wrap">
  <div @click="goTo">
    <span></span>
  </div>
</div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  data() {
    return {
      bdTokenUrl: "",
      dialogVisible: true,
      prodId: '',
      floor: "0"
    };
  },
  watch: {
    $route() {
      console.log("$route");
      this.getFloor()
      this.handle3DUrl()
      // this.handleQueryVideoIndex();
    },
    lang() {
      // this.handle3DUrl()
    }
  },
  computed:{
    ...mapState(['lang']),
    isScene() {
      let isScene = false
      if (this.$route.path.indexOf('/home') >= 0) {
        isScene = true
        this.prodId = this.$route.query.prodId
      }
      return isScene
    }
  },
  mounted() {
    // this.handle3DUrl()

    this.getFloor()
    this.handle3DUrl()
  },
  methods: {
    goTo () {
      this.$router.push({
        path: '/foundation/wap/home'
      })
    },
    getFloor () {
      var floor = this.$route.query.floor
      if(floor != this.floor)
      {
        this.floor = floor;
      }

      console.log("floor:"+this.floor);
    },
    handle3DUrl ()
    {
      if (this.lang === 'en') {
        this.bdTokenUrl="https://showroom.covestro.com/3d/foundation/index.html?id=2&l="+this.floor
      }
      if (this.lang === 'zh') {
        this.bdTokenUrl="https://showroom.covestro.com/3d/foundation/index.html?id=1&l="+this.floor
      }
      if (this.lang === 'de') {
        this.bdTokenUrl="https://showroom.covestro.com/3d/foundation/index.html?id=2&l="+this.floor
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.index-wrap {
  position: relative;
  height: 100vh;
  // height: calc(100vh - 90px);
  div {
    position: absolute;
    background: url("../../../../assets/imgs/logo.jpg") bottom center;
    background-size: auto 100%;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    span {
      position: absolute;
      width: 48px;
      height: 48px;
      background: linear-gradient(to top, #FF7F41, #E6007E);
      border-radius: 50%;
      bottom: 100px;
      left: 50%;
      margin-left: -24px;
      &:after {
        position: absolute;
        content: '';
        width: 30px;
        height: 30px;
        background: #fff;
        border-radius: 50%;
        top: 9px;
        left: 9px;
      }
    }
  }
}
</style>